import { View, Text } from '@tarojs/components'
import { useMobileInfo } from '../../hooks/useMobileInfo'
import './MobileInfoDemo.scss'

export default function MobileInfoDemo() {
  const mobileInfo = useMobileInfo()

  return (
    <View className="mobile-info-demo">
      <View className="info-card">
        <Text className="title">设备信息</Text>
        
        <View className="info-item">
          <Text className="label">设备类型：</Text>
          <Text className="value">{mobileInfo.device}</Text>
        </View>
        
        <View className="info-item">
          <Text className="label">操作系统：</Text>
          <Text className="value">{mobileInfo.os}</Text>
        </View>
        
        <View className="info-item">
          <Text className="label">浏览器：</Text>
          <Text className="value">{mobileInfo.browser}</Text>
        </View>
        
        <View className="info-item">
          <Text className="label">是否移动设备：</Text>
          <Text className="value">{mobileInfo.isMobile ? '是' : '否'}</Text>
        </View>
        
        <View className="info-item">
          <Text className="label">内存：</Text>
          <Text className="value">{mobileInfo.memory}</Text>
        </View>
      </View>

      {/* 根据设备类型显示不同的内容 */}
      {mobileInfo.isMobile && (
        <View className="mobile-specific">
          <Text className="mobile-title">移动设备优化内容</Text>
          <Text className="mobile-desc">这是专门为移动设备优化的界面</Text>
        </View>
      )}

      {!mobileInfo.isMobile && (
        <View className="desktop-specific">
          <Text className="desktop-title">桌面设备内容</Text>
          <Text className="desktop-desc">这是专门为桌面设备优化的界面</Text>
        </View>
      )}

      {/* 根据浏览器类型显示不同的提示 */}
      {mobileInfo.browser === '微信浏览器' && (
        <View className="wechat-tip">
          <Text>检测到微信浏览器，建议使用系统浏览器获得更好体验</Text>
        </View>
      )}
    </View>
  )
}
